<template>
  <div class="screen-full" @click="toggleSceenFull">
    <svg-icon
      class-name="screen-full-icon"
      :icon="isFullScreen ? 'exit-fullscreen' : 'fullscreen'"
    />
  </div>
</template>

<script setup>
import screenfull from 'screenfull'
import { ref } from 'vue'
const isFullScreen = ref(false)
const toggleSceenFull = () => {
  isFullScreen.value = !screenfull.isFullscreen
  screenfull.toggle()
}
</script>

<style lang="scss" scoped>
.screen-full {
  ::v-deep .screen-full-icon {
    font-size: 22px;
  }
}
</style>
